import Taro, { Component } from '@tarojs/taro'
import { AtTabs, AtTabsPane,AtListItem ,AtList } from 'taro-ui'
import { View, ScrollView } from '@tarojs/components'
import { DNavBar, DFinancingRecord, DItemError } from '@/components'
import '../financingrecord/financingrecord.scss'
import './freezingdetails.scss'
import http from '@/api'
export default class FinancingrecordBox extends Component {

    constructor(props) {
        super(props)
        this.state = {
			infoList: [
				{
				  "appId": "string",
				  "createTime": "2020-12-08T11:18:31.540Z",
				  "id": "string",
				  "incomeComId": "string",
				  "incomeComName": "string",
				  "mchId": "string",
				  "orderNo": "string",
				  "payComId": "string",
				  "payComName": "string",
				  "payModel": "string",
				  "payPrice": 0,
				  "payStatus": "string",
				  "payType": "string",
				  "successTime": "2020-12-08T11:18:31.540Z",
				  "tradeStateDesc": "string",
				  "transactionId": "string"
				 }],
			tabList: [{ title: '支付冻结' }, { title: '收到冻结' }],
			active: 0,
            title: '冻结明细',
            obj: {
                page: 1,
                limit: 10
            },
            scrollStyle: window.screen.availHeight,
            footerStatus: false,
            list: [],
            totalPage: 1
        }
    }
    componentWillMount() {
        this.appBankInfoList()
    }
	handleClick(value) {
	  let { id } = this.state
	  this.setState({
	    active: value,
	    obj1: {
	      page: 1,
	      limit: 10
	    },
	    list: [],
	    scrollStyle: window.screen.availHeight,
	    footerStatus: false,
	    totalPage: 1
	  }, () => {
	    if (value === 0) {
	      this.appBankInfoList(id, 1)
	    }
	    if (value === 1) {
	      this.appBankInfoList(id, 2)
	    }

	  })
	}
    appBankInfoList() {
        let { page, limit } = this.state.obj
        let { list, totalPage } = this.state
        let obj = {
            page,
            limit,
			type:this.state.active
        }
        if (page > totalPage) {
            this.setState({
                footerStatus: true
            })
            return
        }
        http.appBankInfoList(obj).then(res => {
			let arr = []
			res.list.map(item=>{
				arr.push({title:'支付给'+item.incomeComName,extraText:item.payPrice,note:'支付时间：'+item.successTime})
			})
            this.setState({
                list: arr,
                totalPage: res.totalPage || 1
            })
        })
    }
    onScroll = () => {
        this.setState({
            obj: {
                ...this.state.obj,
                page: this.state.obj.page + 1
            }
        }, () => {
            this.appBankInfoList()
        })
    }

    render() {
		
        const {active,tabList, title, list, scrollStyle, footerStatus } = this.state
        return (
            <View className="b_financingrecord b_financingrecord">
                <DNavBar title={title}></DNavBar>
				<AtTabs current={active} tabList={tabList} onClick={this.handleClick.bind(this)}>
				 
				  </AtTabs>
				<View className="b_financingrecord__box">
				<ScrollView
				    scrollY
				    scrollWithAnimation
				    lowerThreshold='20'
				    style={`height:${scrollStyle - 50}PX`}
				    onScrollToLower={this.onScroll}>
					<AtList>
					 {list && list.map((item, i) => {
					     return <AtListItem hasBorder={true} key={i} {...item}/>
                       })
					    }
					</AtList>
				   {
				      footerStatus && <View className='b_financingrecord__more'>暂无更多</View>
				   }
				       </ScrollView>
                   </View>
				   {
				       list.length === 0 && <DItemError></DItemError>
				   }
				     
                
            </View>
        )
    }
}
